<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>发布评论</title>
    <style>
        p {
            margin: 10px 0;
        }

        textarea {
            resize: none;
            outline: none;
            background-color: #f3f3f3;
        }

        .container {
            width: 480px;
            /* background-color: antiquewhite; */
        }

        .wrapper {
            display: flex;
            justify-content: space-around;

        }

        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .wrapper textarea {
            transition: all 0.5s;
        }

        .wrapper textarea:hover {
            height: 50px;
        }

        .wrapper .total {
            margin-left: 283px;
            transition: all 0.5s;
            opacity: 0;
        }

        .wrapper .btn {
            width: 50px;
            background-color: #23aaf2;
            color: white;
            border: none;
            border-radius: 5px;
        }

        .list .item {
            display: none;
            border-bottom: 1px solid #8c8c94;
        }

        .list .name {
            color: palevioletred;
            font-size: 14px;
            font-weight: bold;
        }

        .list .text {
            font-size: 16px;
        }

        .list .time {
            color: #8c8c94;
            font-size: 14px;
        }
        .leftfix{
            float: left;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="wrapper">
            <img src="./images/slider01.png" alt="">
            <textarea name="" id="tx" cols="50" rows="2" maxlength="200" placeholder="发布一条友善的评论"></textarea>
            <button class="btn">发布</button>
        </div>
        <div class="wrapper">
            <div class="total">0/200字</div>
        </div>
        <div class="list">
            <div class="item clearfix">
                <img src="./images/slider01.png" alt="" class="leftfix" style="margin-left: 4px;">
                <div class="info leftfix" style="margin-left: 10px;">
                    <p class="name">清风徐来</p>
                    <p class="text">金额iOSxplicabo animi, vel voluptate sunt atque fugiat iste. Minima mollitia iusto
                        porro aliquam quo doloribus veritatis.</p>
                    <p class="time">2023-11-28 20:20:20</p>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 获取文本框、字数对象
        const tx = document.querySelector('#tx')
        const total = document.querySelector('.total')
        // 获取焦点显示字数
        tx.addEventListener('focus', function () {
            total.style.opacity = 1
        })
        // 失去焦点隐藏字数
        tx.addEventListener('blur', function () {
            total.style.opacity = 0
        })
        // 用户输入统计字数
        tx.addEventListener('input', function () {
            total.innerHTML = `${tx.value.length}/200字`
        })
        // 点击发布按钮发布评论
        const btn=document.querySelector('.btn')
        btn.addEventListener('click',function(){
            setCommends()
        })
        // 按下回车发布评论
        tx.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                setCommends()
            }
        })
        // 发布评论方法
        function setCommends(){
            // 用户输入不是空字符串就打印
            if (tx.value.trim()) {
                    document.querySelector('.item').style.display = 'block'
                    document.querySelector('.text').innerHTML = tx.value
                }
                // 清空文本域
                tx.value = ''
                total.innerHTML = '0/200字'
        }
    </script>
</body>

</html>